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> console.log (self) 
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> console.log(navigator.vendor) 


eioht 


garage" 


Международнаа продуктоваа IT- 
компаниа 


Строим экосистему 
высоконагруженных финансовых 
продуктов на зарубежных рынках 
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> throw too many tabs 


мала _ - - І ыза: Е = - , : 
Comi x ЕПЕБКЕЕЕЕКЕКЕЕЕС s и L rursus М NN R У || визазатизлиаајиа5 
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> throw too many tabs 
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> console.log(error.stack) 


5 000 х 10 = 50 000 


> console.log(error.stack) 


–5-000—–10-=-50-000— 
5 000 х 10 = 5 000 


> solve(this) 


beda... 
а —e— 


Использование нескольких вкладок с нашим сайтом не поддерживаетса. 
Пожалуйста, закройте все вкладки, кроме одной 
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> BroadcastChannel 


В BroadcastChannel 


postMessage message event message event 


iframe 


AN 
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> BroadcastChannel 


const channel = new BroadcastChannel("name") ; 
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> BroadcastChannel 


const channel = new BroadcastChannel("name"); 


channel.addEventListener("message", (event) => í 


console.log(event.data); 


)33 
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> BroadcastChannel 


const channel = new BroadcastChannel("name"); 


channel.addEventListener("message", (event) => í 


console.log(event.data); 


y); 


channel.postMessage({ frontend: "conf" |); 
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> BroadcastChannel 


master-slave problem 
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> Shared Worker 


This is not your worker 
This is OUR worker 
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> Shared Worker 


const worker = new SharedWorker("shared.js"); 


Frontend 
Conf 2022 


> Shared Worker 


const worker = new SharedWorker("shared.js"); 


worker.port.start(); 
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> Shared Worker 


const worker = new SharedWorker("shared.js"); 
worker.port.start(); 


worker.port.addEventListener("message", (event) => { 


console.log(event.data); 
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> Shared Worker 


const worker = new SharedWorker("shared.js"); 
worker.port.start(); 


worker.port.addEventListener("message", (event) => { 


console.log(event.data); 


AE 


worker.port.postMessage({ frontend: "conf" Қ; 
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> Shared Worker 


addEventListener( “connect”, (event) => í 


ү) 
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> Shared Worker 


addEventListener( “connect”, (event) => í 


const port = event.ports[0]; 


+); 
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> Shared Worker 


addEventListener( “connect”, (event) => í 


const port = event.ports[0]; 


port.addEventListener( "message", (event) => 4 


console.log(event.data); 


ЭЁ 


El 
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> Shared Worker 


addEventListener( “connect”, (event) => í 


const port = event.ports[0]; 


port.addEventListener( "message", (event) => 4 


console.log(event.data); 


ЭЁ 


port.start(); 
+); 
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> Shared Worker 


* 
Chrome Edge Firefox 


12-18 2428 
79-105 29-104 


> Shared Worker 


Chrome Firefox Safari 


Edge 


Opera 


3.1-4 


12-18 2-28 10.1 5-6.1 


4-105 79-105 29-104 11.5-90  7-15.6 
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> console.log(history) 


olamedia 2016-07-27 04:25:47 PDT 


Can anyone comment what is another option to make shared websocket if you removed this 


Comment 4 


feature? 


Lewis 2017-08-22 23:12:46 PDT Comment 5 


SharedWorker is mandatory for implementing the superthread architecture for webapps. Is 
there any chance that it will be brought back to consideration? 


Brady Eidson 2019-10-06 19:52:54 PDT Comment 6 


(In reply to Lewis from comment #5) 
> SharedWorker is mandatory for implementing the superthread architecture for 


> webapps. Is there any chance that it will be brought back to consideration? 


(Ок am I wrong about that?) 


ServiceWorkers can do everything SharedWorkers could. 
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> ServiceWorker 


Cross-Domain 


Servers / CDNs 
opwa | Service Worker 0-0 Your Server 
Client Proxy Middleware Servers 
Users Device - Browser Cloud 
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> ServiceWorker 


navigator.serviceWorker.register("sw.js"); 
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> ServiceWorker 


navigator.serviceWorker.register("sw.js"); 


navigator.serviceWorker.addEventListener( "message", (event) => 4 


console.log(event.data); 


a 
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> ServiceWorker 


navigator.serviceWorker.ready.then((registration) => 4 


27 


let worker: 

if (registration.active) worker = registration.active; 

if (registration.waiting) worker = registration.waiting; 

if (registration.installing) worker = registration.installing; 


worker.postMessage("ping"); 
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> ServiceWorker 


addEventListener("message", (event) => { 
console.log(event.data); 


125 


> ServiceWorker 


addEventListener("message", (event) => 4 
console.log(event.data); 


122 


clients.matchAll().then((tabs) => 4 
tabs.forEach((tab) => í 
tab.postMessage({ frontend: "conf" )); 
}); 
}); 


> ServiceWorker 
X BroadcastChannel 


X SharedWorker 


мо ServiceWorker 
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> console.dir(this) 


е ping — pong 


, ~ ` 
+ + 


© = кони 


> console.dir(this) 


installing waiting active 


е ping — pong 


е обновление 
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> console.dir(this) 


installing waiting active 


е ping — pong 


е обновление 
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> console.dir(this) 


installing waiting active 


е ping — pong 


е обновление 
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> console.dir(this) 


installing waiting active 


е ping — pong 


е обновление 
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> console.dir(this) 


ping — pong 
e обновление 


е запрос — ответ 
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> JSON-RPC 2.0 


https://www.jsonrpc.org/specification 


> JSON-RPC 2.0 


"jsonrpc": "2.0", 
- reguest "method": “init”, 
"params": 4 


“frontend”: "conf" 


"id": 1 
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> JSON-RPC 2.0 


4 
"jsonrpc': 2.8, 
- request "method": "init", 
- notification "params": í 
"frontend": "conf" 
) 
) 
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> JSON-RPC 2.0 


- request 
- notification 
- Success 


4 
"jsonrpc": "2.0", 
"result": í 
"year": 2022 
ls 
tig": 1 
) 
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> JSON-RPC 2.0 


- request 

- notification 
- SUCCESS 

- error 


4 
"7]$опгрс": "2.0", 
"error": 5 
"code": -32000, 
"message": "Server error" 
£ 
"ad": J 
} 
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register 
claim 


Server 
connect o WebSocket 


© 
- 
б 
s 
Ф 
© 
е 
Ф 
の 


register 
claim 


fetch reguest 


Server 


rpc reguest я--- WebSocket 


A 


A 


broadcast 


postMessage 


Server 


rpc notification << WebSocket 


postMessage 
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Tabl (та2 | Таз |Tab2 | | 


Сет Client] 


Tabl (та2 | (Та! |Tab2 | | 


Client] Clienti 


message sent 


// іп tab 
fetch("/rpc/message", 4 
method: "POST", 
body: JSON.stringify({ 
message: "You аге awesome" 
+) 
3 


// in worker 
addEventListener("fetch", (event) -» ( 
if (isRPC(event.reguest.url)) í 


return event.respondWith(rpc(event.request)) 


Ps 
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Tabl (та2 | јат |Tab2 | | 


Client] | Clienti 


message sent 


You are awesome 


You are awesome 


const broadcast = (message) => 4 
clients.matchAll().then((tabs) => í 
tabs.forEach((tab) => tab.postMessage(message)); 
ү}; 
2 


socket.addEventListener("message", (event) => í 
const json = JSON.parse(event.data); 
if (json.method === "message") { 


broadcast(json.params) ; 


25 
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Tabl (та2 | Та! || |Таь2 | | 
— 


message sent 


You are awesome 


Client] 


Client 1 


You are awesome 


message sent 


Tabl (та2 | (Та! |Tab2 | | 


Client 1 Client 1 


message sent 


You are awesome 


message sent 


You are awesome 


No, you are 


Tabl (та2 | (Та! |Tab2 | | 


Client 1 Client 1 


message sent 
You are awesome 


You are awesome 
Novae 0000002 "ат 


message sent 


Tabl (та2 | (Та! |Tab2 | | 


Client 1 Client 1 


message sent 
You are awesome 


You are awesome 
КУ оо "am 
WOW 


message sent 


> navigator.share() 


^ «Br 
https://github.com/eolme/sw-chat е 
БЕ " 
= 


> exit() 


е Многократно снизили нагрузку Ha Backend 
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> exit() 


е Многократно снизили нагрузку Ha Backend 


e Общение, подобное REST, поверх WebSocket 
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> exit() 


е Многократно снизили нагрузку на Васкепа 
е Общение, подобное REST, поверх WebSocket 


е Удобная отладка через DevTools 
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ç di 


Кто, если He мы? (e) г (е) 
xar AF. Tr 


P 
— r 
@petrov.engineer 2... t к 


iimQpetrov.engineer 


а apetrov@garage-eight.com 
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